<template>
  <div>
    <button @click="isShow=!isShow">切换</button>
  <!-- 必须使用v-if或者v-show进行条件渲染,或者使用路由进行切换,或者新增删除数据导致DOM的新增和删除
        - 在需要执行动画元素的外层添加transition组件 -->

        <transition name="show">
          <div v-if="isShow" class="box"></div>
        </transition>
        <button @click="isShow1=!isShow1">切换</button>
        <transition name="show1">
          <div v-if="isShow1" class="box"></div>
        </transition>
        
      </div>
</template>

<script>
export default {
name:"App",
data(){
  return{
    isShow:true,
    isShow1:true
  }
}
}
</script >

<style scoped>

.box{
  width: 400px;
  height: 400px;
  background-color: green;
}
/* 如果我们是按照进入动画封装的关键帧动画,则from就是进来之前的样式,to就是进入之后的样式(to不用写) */
@keyframes enter{
  from{
    transform: translate(100px,100px) rotate(360deg);
    opacity: 0;
    background-color: aquamarine;
  }
  50%{
    transform: translate(100px,0px) rotate(360deg);
    opacity: 0.4;
    background-color: brown;
  }
  to{}
}

.v-enter-active{

  animation:enter  1s linear;
}
.v-leave-active{
  
  animation: enter 1s linear;
}
.show-enter-active {
  animation: enter 1s linear;
}
.show-leave-active {
  animation: enter 1s linear reverse;
}

.show1-enter-active {
  animation: enter 2s linear;
}
.show1-leave-active {
  animation: enter 2s linear reverse;
}
</style>